<template>
  <div id="main" style="width: 100%; height: 100%"></div>
</template>

<script setup name="gmv">
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { countByDateList } from '../../../api/modules/echart';
const getEcharts = async() => {
  let res = await countByDateList()
    console.log(res);
    let mdate = res.data.data.map((obj) => {
    return obj.date
  });
  let dtotal = res.data.data.map((obj) => {
    return obj.total
  });
  console.log(mdate);
  console.log(dtotal);
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  // let base = +new Date(2016, 9, 3);
  // let oneDay = 24 * 3600 * 1000;
  // let date = [];
  // let data = [12, 20];
  // for (let i = 1; i < 2000; i++) {
  //   var now = new Date((base += oneDay));
  //   date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
  //   data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
  // }
  // var now = new Date((base += oneDay));
  // date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
  // data.push(Math.round((Math.random() - 0.5) * 20 + data[1 - 1]));
  // var now = new Date((base += oneDay));
  // date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
  // data.push(Math.round((Math.random() - 0.5) * 20 + data[2 - 1]));
  option = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    title: {
      // left: 'center',
      text: '2022上半年药品日销售额'
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: mdate
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%']
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 10
      },
      {
        start: 0,
        end: 10
      }
    ],
    series: [
      {
        name: '销量',
        type: 'line',
        symbol: 'none',
        sampling: 'lttb',
        itemStyle: {
          color: 'rgb(255, 70, 131)'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 158, 68)'
            },
            {
              offset: 1,
              color: 'rgb(255, 70, 131)'
            }
          ])
        },
        data: dtotal
      }
    ]
  };

  option && myChart.setOption(option);


  window.onresize = () => {
    myChart.resize()
  }
}
onMounted(() => {
  setTimeout(() => {
    getEcharts()
  }, 1000)
})
</script>
